<template>
  <div ref="chartRef" class="echarts-flow3d"></div>
</template>

<script>
import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
import 'echarts-gl'

export default {
  name: 'EchartsFlow',
  setup() {
    const chartRef = ref(null)
    let chart

    const init = () => {
      chart = echarts.init(chartRef.value)

      const nodes = [
        { name: '原料仓', x: 0, z: 0, h: 12, color: '#4c9bfd' },
        { name: '输送带', x: 8, z: 0, h: 6, color: '#9fe6b8' },
        { name: '混合机', x: 16, z: 0, h: 10, color: '#00f2f1' },
        { name: '回转窑', x: 24, z: 0, h: 9, color: '#ed3f35' },
        { name: '成品库', x: 32, z: 0, h: 12, color: '#006cff' }
      ]

      const linePoints = [
        [nodes[0].x, 0, nodes[0].z],
        [nodes[1].x, 0, nodes[1].z],
        [nodes[2].x, 0, nodes[2].z],
        [nodes[3].x, 0, nodes[3].z],
        [nodes[4].x, 0, nodes[4].z]
      ]

      const option = {
        backgroundColor: 'transparent',
        grid3D: {
          boxWidth: 50,
          boxDepth: 16,
          axisLine: { lineStyle: { color: 'rgba(76,155,253,.35)' } },
          splitLine: { lineStyle: { color: 'rgba(76,155,253,.15)' } },
          environment: 'auto',
          viewControl: { projection: 'perspective', alpha: 18, beta: 15, autoRotate: true, autoRotateSpeed: 2, distance: 120 },
          light: { main: { intensity: 1.2, shadow: true }, ambient: { intensity: 0.6 } },
          postEffect: { enable: true, bloom: { enable: true }, SSAO: { enable: true, radius: 2, intensity: 1.2 } },
          temporalSuperSampling: { enable: true }
        },
        xAxis3D: { type: 'value', axisLabel: { show: false }, min: -4, max: 36 },
        yAxis3D: { type: 'value', axisLabel: { show: false }, min: 0, max: 16 },
        zAxis3D: { type: 'value', axisLabel: { show: false }, min: -8, max: 8 },

        series: [
          // 建筑：用 bar3D 表达体量
          {
            type: 'bar3D',
            shading: 'realistic',
            realisticMaterial: { roughness: 0.35, metalness: 0.2 },
            barSize: 4,
            label: { show: true, formatter: (p) => nodes[p.dataIndex].name, textStyle: { color: '#cfe8ff', fontSize: 12 } },
            data: nodes.map(n => ({ value: [n.x, 0, n.h], itemStyle: { color: n.color } }))
          },

          // 流动线：使用 line3D（带流动特效）
          // 暂时移除 line3D，避免兼容错误（后续替换为 lines3D/自定义动画）

          // 节点高亮环：以 scatter3D 表达顶部微光
          {
            type: 'scatter3D',
            symbol: 'circle',
            symbolSize: 8,
            itemStyle: { color: '#00f2f1' },
            data: nodes.map(n => [n.x, n.h + 0.8, n.z])
          }
        ]
      }

      chart.setOption(option)

      // 自适应
      const onResize = () => { chart && chart.resize() }
      window.addEventListener('resize', onResize)
      chart.__onResize = onResize
    }

    onMounted(() => init())
    onBeforeUnmount(() => {
      if (chart) {
        window.removeEventListener('resize', chart.__onResize)
        chart.dispose()
      }
    })

    return { chartRef }
  }
}
</script>

<style scoped>
.echarts-flow3d {
  width: 100%;
  height: 100%;
}
</style>
